
import 'package:flutterappyidongjingfen/Extension/touch_callback.dart';
import 'package:flutter/material.dart';
import 'depositSecondIndexPage.dart';
import 'package:flutterappyidongjingfen/Views/TabPageViews.dart';
import 'package:flutterappyidongjingfen/LineChart/chart_utils.dart';
//import 'depositBrowsePage.dart';



class depositPage extends StatefulWidget {
  @override
  depositPageState createState() => depositPageState();
}


class depositPageState extends State<depositPage>{
  var _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      backgroundColor: Color.fromRGBO(11, 13, 28, 1),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          /// 导航栏
          navgationBar(),
          /// 菜单栏
          menuView(),
          /// 卡片
          cardListView(),
        ],
      ),
    );
  }

  ///导航栏
  Widget navgationBar(){
    return Container(
      margin: EdgeInsets.only(left: 0,right: 15,top: 40),
      height: 30,
      child: Row(
        children: <Widget>[
          // 返回按钮
          TouchCallBack(
            isfeed: false,
            onPressed: (){
              Navigator.pop(context);
            },
            child: Container(
//              height: 40.0,
              margin: const EdgeInsets.only(left: 12.0,right: 10.0),
              child: Icon(
                Icons.chevron_left,
                color: Colors.white,
                size: 30,
              ),
            ),
          ),
          //输入框
          Expanded(

            child: TextField(

//              autofocus: true,
              style: TextStyle(
                color: Colors.white,
                fontSize: 13.0,
              ),
              onChanged: (String text){},

              cursorColor: Colors.white,
              decoration: InputDecoration(
                fillColor: Color(0xFF23283C),
                filled: true,

                hintText: "机构、渠道、产品、指标",
                hintStyle: TextStyle(fontSize: 13,color: Colors.white30),
                enabledBorder: new OutlineInputBorder(  //添加边框
                  borderSide: BorderSide(color: Color(0xFF23283C),width: 0.5),
                  borderRadius: BorderRadius.circular(5.0),

                ),
                focusedBorder: new OutlineInputBorder(  //添加边框
//                  borderSide: BorderSide(color: Colors.blueAccent,width: 0.5),
                  borderRadius: BorderRadius.circular(5.0),
                ),

                  prefixIcon: new Icon(Icons.search,color: Colors.white30),
                  contentPadding: const EdgeInsets.only(top: 6),
                  ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 5)),
          Icon(Icons.mic_none,color: Colors.white)
        ],
      ),
    );
  }

  ///菜单
  Widget menuView(){
    return Container(
      margin: EdgeInsets.only(left: 0,right: 0,top: 24),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          menuChid(0,"存款"),
          menuChid(1,"贷款"),
          menuChid(2,"收入"),
          menuChid(3,"风险"),
          menuChid(4,"效率"),
        ],
      ),
    );
  }

  ///
  Widget menuChid(int index, String title){
    return Column(
      children: <Widget>[
        TouchCallBack(
          onPressed: (){
            setState(() {
              _currentIndex = index;
            });
          },
          child: Text(title,style: TextStyle(fontSize: 15.0,color: _currentIndex == index ? Color(0xFF119CFD) : Colors.white,fontWeight: FontWeight.bold)),
        ),
        Padding(padding: EdgeInsets.only(bottom: 3),),
        SizedBox(
          width: 18,
          height: 3,
          child: Container(
                decoration: ShapeDecoration(
                        color: _currentIndex == index ? Color(0xFF119CFD) : Colors.transparent,
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1.5)),
                      ),
        )
        ),
      ],
    );
  }

  Widget cardListView(){

    switch(_currentIndex){
      case 0:
        return Container(
//      color: Colors.red,
          height: MediaQuery.of(context).size.height - 150,
          margin: EdgeInsets.only(left: 10,right: 10,top: 16),
          child: ListView(
            shrinkWrap: true,
            padding: EdgeInsets.only(top: 0),
            children: <Widget>[
              cardwith("一般存款",context),
              cardwith("零售存款",context),
              cardwith("公司存款",context),
              cardwith("小企业存款",context),
            ],
          ),
        );
      case 1:
        return listView2(context);
      case 2:
        return Container();
      case 3:return Container();
      case 4:return Container();
      default:return Container();
    }
  }



  Widget cardwith(String title,BuildContext context){
    return Container(
      height: 400,
      child: Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          color: Color(0xFF23283C),
          child: Column(
            children: <Widget>[
              cardTitleRow(title,context),
              CompareRow(),
              /// 表格
              baseChart(title),
              /// 小色块
              title == "一般存款" ? bottomBlockWidget1() : bottomBlockWidget(),
              Padding(padding: EdgeInsets.only(bottom: 10)),
              dividerLine(),
              Padding(padding: EdgeInsets.only(bottom: 12)),
              bottomQuestion(),
            ],
          )
      ),
    );
  }

  Widget cardTitleRow(String title,BuildContext context){
    return Container(
      margin: EdgeInsets.fromLTRB(15, 10, 0, 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            width: 3,
            height: 16,
            child: Container(
//              color: Colors.blue,
              decoration: ShapeDecoration(
                color: Colors.blue,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1.5)),
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 8)),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  title,
                  style: TextStyle(fontSize: 16.0,color: Colors.white),
                ),
              ],
            ),
          ),
          TouchCallBack(
            child:  Container(
                alignment: AlignmentDirectional.topStart,
                margin: const EdgeInsets.only(right: 12.0,top: 5.0),
                child: Icon(Icons.chevron_right,color: Colors.white38)
            ),
            onPressed: (){
              Navigator.pushNamed(context, 'dispositBrowsePage');
              print("${title}被点击");
            },
            background: Colors.black12,
          )

        ],
      ),
    );
  }

  Widget CompareRow(){
    return Container(
      margin: EdgeInsets.only(top: 10,bottom: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[

          Column(
            children: <Widget>[
              Text("月日均",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
//                  Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0,),
                  Text("1000亿",style: TextStyle(color: Color(0xFF119CFD),fontSize: 16.0),)
                ],
              )
            ],
          ),

          Column(
            children: <Widget>[
              Text("比上月",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
                  Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0,),
                  Text("3.48亿",style: TextStyle(color: Color(0xFFFF3F77),fontSize: 16.0),)
                ],
              )
            ],
          ),
          Column(
            children: <Widget>[
              Text("余额",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
//                  Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0),
                  Text("2000亿",style: TextStyle(color: Color(0xFFFF3F77),fontSize: 16.0),)
                ],
              )
            ],
          ),
          Column(
            children: <Widget>[
              Text("比上月",style: TextStyle(fontSize: 13,color: Color(0xFF7981A0))),
              Row(
                children: <Widget>[
                  Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 16.0),
                  Text("100亿",style: TextStyle(color: Color(0xFFFF3F77),fontSize: 16.0),)
                ],
              )
            ],
          ),
        ],
      ),
    );
  }

  /// 表格
  Widget baseChart(String title){
    return Container(
      margin: EdgeInsets.only(top: 5),
      child: Stack(
        children: <Widget>[
          ChartLine(
//        backgroundColor: Colors.red,
            chartBeans: [
              ChartBean(x: '1月', y: 150,color: Colors.green),
              ChartBean(x: '', y: 90,color: Colors.green),
              ChartBean(x: '3月', y:50,color: Colors.red),
              ChartBean(x: '', y: 55,color: Colors.green),
              ChartBean(x: '', y: 240,color: Colors.green),
              ChartBean(x: '6月', y: 60),
              ChartBean(x: '', y: 180,color: Colors.green),
              ChartBean(x: '', y: 23,color: Colors.green),
              ChartBean(x: '9月', y: 100),
              ChartBean(x: '', y: 78,color: Colors.green),
              ChartBean(x: '', y: 190,color: Colors.green),
              ChartBean(x: '12月', y: 400),

            ],
            isShowHintX:true,
            hintXLineWidth: 0.5,
            hintXColor: Colors.white,
            size: Size(MediaQuery.of(context).size.width - 20,
                200),
            isCurve: true,
            lineWidth: 2.5,
            lineColor: Color(0xFF00C2FA),
            fontColor: Colors.white70,
            xyColor: Colors.transparent,
            isShowBottomtHintX: true,
            xTextPadding: 5,
            numberOfhintX: 5,
            fontSize: 11,
            yNum: 4,
            isReverse: false,
            isCanTouch: true,
            isShowPressedHintLine: true,
            pressedPointRadius: 4,
            isShowXyRuler: false,
            pressedHintLineWidth: 0.5,
            pressedHintLineColor: Colors.white,
            duration: Duration(milliseconds: 2000),
          ),
          ChartLine(
//        backgroundColor: Colors.red,
            chartBeans: [
              ChartBean(x: '1月', y: 150),
              ChartBean(x: '', y: 20),
              ChartBean(x: '3月', y:80),
              ChartBean(x: '', y: 260),
              ChartBean(x: '', y: 290),
              ChartBean(x: '6月', y: 90),
              ChartBean(x: '', y: 206),
              ChartBean(x: '', y: 350),
              ChartBean(x: '9月', y: 120),
              ChartBean(x: '', y: 166),
              ChartBean(x: '', y: 304),
              ChartBean(x: '12月', y: 90),

            ],
            isShowHintX:true,
            hintXLineWidth: 0.5,
            hintXColor: Colors.white,
            size: Size(MediaQuery.of(context).size.width - 20,
                200),
            isCurve: true,
            lineWidth: 2.5,
            lineColor: Color(0xFFFAD961),
            fontColor: Colors.transparent,
            xyColor: Colors.transparent,
            isShowBottomtHintX: true,
            xTextPadding: 5,
            numberOfhintX: 5,
            fontSize: 11,
            yNum: 4,
            isReverse: false,
            isCanTouch: true,
            isShowPressedHintLine: true,
            pressedPointRadius: 4,
            isShowXyRuler: false,
            pressedHintLineWidth: 0.5,
            pressedHintLineColor: Colors.white,
            duration: Duration(milliseconds: 2000),
          ),
          title == "一般存款" ? ChartLine(
//        backgroundColor: Colors.red,
    chartBeans: [
    ChartBean(x: '1月', y: 50),
    ChartBean(x: '', y: 200),
    ChartBean(x: '3月', y:150),
    ChartBean(x: '', y: 60),
    ChartBean(x: '', y: 90),
    ChartBean(x: '6月', y: 340),
    ChartBean(x: '', y: 280),
    ChartBean(x: '', y: 150),
    ChartBean(x: '9月', y: 200),
    ChartBean(x: '', y: 66),
    ChartBean(x: '', y: 34),
    ChartBean(x: '12月', y: 130),

    ],
    isShowHintX:true,
    hintXLineWidth: 0.5,
    hintXColor: Colors.white,
    size: Size(MediaQuery.of(context).size.width - 20,
    200),
    isCurve: true,
    lineWidth: 2.5,
    lineColor: Color(0xFF1AEFC8),
    fontColor: Colors.transparent,
    xyColor: Colors.transparent,
    isShowBottomtHintX: true,
    xTextPadding: 5,
    numberOfhintX: 5,
    fontSize: 11,
    yNum: 4,
    isReverse: false,
    isCanTouch: true,
    isShowPressedHintLine: true,
    pressedPointRadius: 4,
    isShowXyRuler: false,
    pressedHintLineWidth: 0.5,
    pressedHintLineColor: Colors.white,
    duration: Duration(milliseconds: 2000),
    ) : Container(),
          Container(
//          color: Colors.red,
              margin: EdgeInsets.fromLTRB(14, 10, 0, 0),
              child: Text("亿",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
          ),
        ],
      ),
    );
  }
  //底部蓝色和黄色小块
  Widget bottomBlockWidget(){
    return Container(
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 12.5,
              height: 7.5,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF119CFD),Color(0xFF119CFD)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 3)),
            Text("余额",style: TextStyle(fontSize: 11.0,color: Colors.white70),),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 12.5,
              height: 7.5,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFFF3CE30),Color(0xFFF3CE30)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 3)),
            Text("月日均",style: TextStyle(fontSize: 11.0,color: Colors.white70),)
            ///1AEFBA
          ],

        ),
      ),
    );
  }

  //底部蓝色和黄色小块
  Widget bottomBlockWidget1(){
    return Container(
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: 12.5,
              height: 7.5,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF119CFD),Color(0xFF119CFD)],
//                  colors: [Color(0xFFF8A03D),Color(0xFFF8A03D)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 3)),
            Text("余额",style: TextStyle(fontSize: 11.0,color: Colors.white70),),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 12.5,
              height: 7.5,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFFF3CE30),Color(0xFFF3CE30)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 3)),
            Text("月日均",style: TextStyle(fontSize: 11.0,color: Colors.white70),),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 12.5,
              height: 7.5,
              child: Container(
                decoration: ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF1AEFBA),Color(0xFF1AEFBA)],
                  ),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)),
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 3)),
            Text("年日均",style: TextStyle(fontSize: 11.0,color: Colors.white70),)
            ///
          ],

        ),
      ),
    );
  }

}

